<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="主表名称">
          <!--<a-input
            placeholder="请输入主表名称"
            v-decorator="['viewMaintable', validatorRules.viewMaintable ]"
          />-->
           <a-auto-complete
             :data-source="dataSource"

             :filter-option="filterOption"
             v-decorator="['viewMaintable', validatorRules.viewMaintable ]"
           />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="视图名称">
          <a-input placeholder="请输入视图名称" v-decorator="['viewName', validatorRules.viewName ]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="视图描述">
          <a-input placeholder="请输入视图描述" type="textarea" v-decorator="['viewComments', {}]" />
        </a-form-item>
        <!--<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="视图类型">
&lt;!&ndash;          <a-input placeholder="请输入视图类型" v-decorator="['viewType', validatorRules.viewType ]" />&ndash;&gt;
          <a-select default-value="1" v-decorator="['viewType', validatorRules.viewType ]">
            <a-select-option value="1">单表</a-select-option>
            <a-select-option value="2">多表</a-select-option>
          </a-select>
        </a-form-item>-->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="包名">
          <a-input placeholder="请输入包名" v-decorator="['viewPacking', validatorRules.viewPacking ]" />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="布局列数">
          <!--<a-input
            placeholder="请输入布局列数"
            v-decorator="['viewMaincols', validatorRules.viewMaincols ]"
          />-->
          <a-select  v-decorator="['viewMaincols', validatorRules.viewMaincols ]">
            <a-select-option value="1">1</a-select-option>
            <a-select-option value="2">2</a-select-option>
            <a-select-option value="3">3</a-select-option>
            <a-select-option value="4">4</a-select-option>
          </a-select>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction ,getAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'CodeNewModule',
  data() {
    return {
      value: '',
      dataSource: [],
      //
      viewType:'',

      title: '视图信息',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        viewName: { rules: [{ required: true, message: '请输入视图名称!' }] },
        viewPacking: { rules: [{ required: true, message: '请输入包名!' }] },
        viewMaintable: { rules: [{ required: true, message: '请输入主表名称!' }] },
        viewMaincols: { initialValue: "2",rules: [{ required: true, message: '请输入布局列数!' }] },
      },
      url: {
        add: '/generatecode/viewModule/add',
        edit: '/generatecode/viewModule/edit',
        complete:'/generatecode/viewModule/querySQL',
      }
    }
  },
  created() {
    this.getsql();
  },
  methods: {
    add(viewType) {
      this.viewType=viewType
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'viewName',
            'viewComments',
            'viewPacking',
            'viewMaintable',
            'viewMaincols',
            //'viewType'
          )
        )
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          if(this.viewType){
            this.viewType="1";
          }
          formData.viewType=this.viewType
          console.log(formData)
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok',this.form.getFieldValue("viewMaintable"),res.result.id)
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },

//获取数据库所有表名称，用来做自动完成
    getsql() {
      getAction(this.url.complete).then(res => {
        if (res.success) {
          this.dataSource = res.result;
        }
      })
    },
    //自动完成的方法
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      );
    },
    //将表字段全部添加到ui表
    /*saveColumnNames(){
      console.log(this.form.getFieldValue("viewMaintable"))
      getAction("/generatecode/viewUiproperties/saveColumn",{tableName:this.form.getFieldValue("viewMaintable")}).then(res => {
        if (res.success) {
          //this.columnNames = res.result;
          console.log(res.result)
        }
      })
    }*/
  }
}
</script>

<style lang="less" scoped>
</style>